<template>
    <div>
        <!-- 
            show-checkbox	节点是否可被选择	boolean	—	false
            check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false	boolean	—	false
            default-expand-all	是否默认展开所有节点	boolean	—	false
            node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	String
            props	配置选项，具体看下表	object
                label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—	—
                children	指定子树为节点对象的某个属性值	string
         -->
        <el-dialog :title="roleStatus.isAdd ? '添加角色' : '编辑角色'" :visible.sync="roleStatus.isShow" width="60%" center
            :before-close="cancel">
            <el-form ref="form" :rules="rules" :model="roleForm" label-width="80px">
                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="roleForm.rolename"></el-input>
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-tree :data="$store.getters['menu/getMenu']" check-strictly show-checkbox default-expand-all
                        node-key="id" ref="tree" :props="{
                                children: 'children',
                                label: 'title'
                            }">
                    </el-tree>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="roleForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="add" type="primary">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { roleadd, roleinfo, roleedit } from '../../request/api'
export default {
    props: ['roleStatus'],
    data() {
        return {
            roleForm: {
                rolename: "",//角色名称 string
                menus: "",//角色权限 id数组'2,3,4' 字符串
                status: 1//状态1正常2禁用number
            },
            rules: {
                rolename: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            },

        };
    },
    methods: {
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 清空表单内容
        reset() {
            this.roleForm = {
                rolename: "",//角色名称 string
                menus: "",//角色权限 id数组'2,3,4' 字符串
                status: 1//状态1正常2禁用number
            }
            // 清除规则
            this.$refs.form.resetFields()
            // 清空树形控件的选中状态
            this.$refs.tree.setCheckedKeys([])
        },
        // 编辑时，数据回显
        async lookup(id) {
            let res = await roleinfo({ id })
            this.roleForm = res.list
            this.roleForm.id = id
            this.$refs.tree.setCheckedKeys(this.roleForm.menus ? this.roleForm.menus.split(',') : []);

        },
        // 添加角色
        add() {
            this.$refs.form.validate((val) => {
                if (val) {
                    this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(',')
                    if (this.roleStatus.isAdd) {//添加角色
                        roleadd(this.roleForm)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    this.cancel()
                                    this.$store.dispatch('role/GetRoleInfo')
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {//编辑角色
                        roleedit(this.roleForm)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    this.cancel()
                                    this.$store.dispatch('role/GetRoleInfo')
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }
                }
            })
        }

    },
    mounted() {
        if (this.$store.getters['menu/getMenu'].length == 0) {
            this.$store.dispatch('menu/GetMenuInfo')
        }

    },
    computed: {

    },
    components: {}
}
</script>
<style scoped></style>